<template>
  <div style="background-color: rgb(238, 238, 238)">
    <div class="bannerTitle">
      {{ bannerTitle }}
    </div>
    <Card>
      <!-- <el-button type="success" @click="userPushMoblie">添加管理员账号</el-button> -->
    </Card>
    <div class="button_box">
      数据列表

      <ButtonCn
        text="添加管理员账号"
        @myclick="userPushMoblie"
        :iconShow="true"
        style="float: right"
      ></ButtonCn>
    </div>
    <div style="width: 100%; margin: 0 auto">
      <Card>
        <el-table :data="getUserlist" style="width: 100%">
          <!-- <el-table-column type="selection" width="100"> </el-table-column> -->
          <el-table-column prop="managers_name" label="账户名">
          </el-table-column>
          <el-table-column prop="manager_id" label="表id"> </el-table-column>
          <el-table-column prop="managers_state" label="账户名">
          </el-table-column>
          <el-table-column prop="managers_phone" label="电话">
          </el-table-column>
          <el-table-column prop="statemsg" label="账户说明"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="edit" @click="textedit(scope.row)">编辑</span>
            </template>
          </el-table-column>
        </el-table>
      </Card>
    </div>
    <!-- 添加管理员账号 -->
    <AlertCn
      :alertShow="isShowMoblieDialog"
      rightText="确 定"
      leftText="取 消"
      @confirm="submintFrom"
      @cancel="isShowMoblieDialog = false"
      @clone="isShowMoblieDialog = false"
    >
      <el-form ref="form" :model="Userform" label-width="100px">
        <el-form-item label="请输入账号">
          <el-input v-model="Userform.account"></el-input>
        </el-form-item>
        <el-form-item label="请输入密码">
          <el-input v-model="Userform.pwd"></el-input>
        </el-form-item>
        <el-form-item label="请输入电话">
          <el-input v-model="Userform.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-tree
        :data="userTreeData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check="node_click"
      >
      </el-tree>
    </AlertCn>
    <!-- 操作按钮 -->
    <AlertCn
      :alertShow="editIsShow"
      rightText="确定修改"
      leftText="取 消"
      @confirm="editSubmint"
      @cancel="editIsShow = false"
      @clone="editIsShow = false"
    >
      <el-form :model="editObject" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editObject.managers_name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editObject.managers_phone"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="editObject.managers_state"
            placeholder="请选择"
            @click="ChangeOption"
          >
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </AlertCn>
  </div>
</template>

<script>
import {
  addadminFun,
  adminList,
  modifyaccountinfo,
  adminListidet,
} from "@/request/index";
import Card from "@/components/from/card.vue";
import ButtonCn from "@/components/from/button-cn.vue";
import AlertCn from "@/components/from/alert-cn.vue";

export default {
  data() {
    return {
      editIsShow: false,
      editObject: {},
      bannerTitle: "",
      dialogVisible: false,
      account: null,
      phone: null,
      count: null,
      Userform: {
        account: "",
        pwd: "",
        phone: "",
        role: [],
      },
      option: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 2,
          label: "关闭",
        },
      ],
      getUserlist: [],
      isShowMoblieDialog: false,
      userTreeData: [],
      nodeElementData: [],
      defaultProps: {
        children: "secondary",
        label: "role_name",
      },
      roleData: [],
    };
  },
  onload(path) {
    console.log(path);
  },
  created() {
    this.$vuex.state.bookList.map((item) => {
      if (item.name == this.$route.query.name) {
      } else {
        this.$vuex.state.bookList.push(this.$route.query);
      }
    });
    this.bannerTitle = this.$route.query.name;
    this.userTreeData = JSON.parse(window.sessionStorage.getItem("menulist"));
    // console.log(this.userTreeData);
    this.getUserlistMethods();
  },
  methods: {
    ChangeOption(status) {
      this.editObject.managers_state = status;
    },
    editSubmint() {
      modifyaccountinfo(
        this.editObject.managers_name,
        this.Userform.pwd,
        this.editObject.managers_phone,
        this.editObject.managers_state,
        this.editObject.manager_id
      ).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.getUserlistMethods();
        this.editIsShow = false;
      });
    },
    textedit(item) {
      console.log(item);
      this.editIsShow = true;
      this.editObject = item;
    },
    editData(item) {
      this.dialogVisible = true;
      console.log(item);
    },
    getUserlistMethods() {
      adminList(this.account, this.phone, this.count).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.getUserlist = res.data.data;
      });
    },
    // 点击确定
    submintFrom() {
      // this.isShowMoblieDialog = true;
      var data = this.nodeElementData[this.nodeElementData.length - 1];
      var nameData = [];
      var newer = [];
      data.map((item) => {
        if (item.secondary) {
          nameData.push(item.role_name);
          item.secondary.map((item1) => {
            newer = item1.role_name.split(",");
          });
          var add = newer.concat(newer);
          nameData.push(add);
        }
      });
      console.log(nameData);

      addadminFun(
        this.Userform.account,
        this.Userform.pwd,
        this.Userform.phone,
        nameData
      ).then((res) => {
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.getUserlistMethods();
        this.isShowMoblieDialog = false;
      });
    },
    userPushMoblie() {
      this.isShowMoblieDialog = true;
    },
    // 点击复选框
    node_click(node, data) {
      this.nodeElementData.push(data.checkedNodes);
    },
  },
  components: { Card, ButtonCn, AlertCn },
};
</script>
<style lang="scss" scoped>
@import "../../components/style/init_el_checkout.scss";
@import "../../components/style/index.scss";

::v-deep .el-main {
  background-color: rgb(238, 238, 238) !important;
}

.edit {
  color: #e04e2f;
  margin-right: 10px;
  cursor: pointer;
}

.topping {
  cursor: pointer;
}
</style>
